<template>
    <tn-navbar-mini title="修改密码" homeUrl="/pages/index/index" :autoBack="true" v-if="logined">
    </tn-navbar-mini>
    <view class="body">
        <view class="login__bg login__bg--top">
            <image class="bg" src="/static/pagesA/login/login-top2.png" mode="widthFix"></image>
        </view>
        <view class="login__bg login__bg--bottom">
            <image class="bg" src="/static/pagesA/login/login-bottom2.png" mode="widthFix"></image>
        </view>
        <view class="box z-1">
            <template v-if="currentModeIndex === 0">
                <TnInput class="mb-60rpx h-60rpx" placeholder="请输入账号名称或手机号" border="surround" v-model="form.account">
                    <template #prefix>
                        <view class="tn-icon-phone text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
                <TnInput class="mb-60rpx h-60rpx" :type="showPassword ? 'text' : 'password'" placeholder="请输入登录密码"
                    border="surround" v-model="form.password">
                    <template #prefix>
                        <view class="tn-icon-lock text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
            </template>
            <template v-if="currentModeIndex === 1">
                <TnInput class="mb-60rpx h-60rpx" placeholder="请输入帐户名称" border="surround" v-model="form.username">
                    <template #prefix>
                        <view class="tn-icon-my-lack-fill text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
                <TnInput class="mb-60rpx h-60rpx" placeholder="请输入手机号" border="surround" v-model="form.mobile">
                    <template #prefix>
                        <view class="tn-icon-phone text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
                <TnInput class="mb-60rpx h-60rpx" :type="showPassword ? 'text' : 'password'" placeholder="请输入登录密码"
                    border="surround" v-model="form.password">
                    <template #prefix>
                        <view class="tn-icon-lock text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
                <TnInput class="mb-60rpx h-60rpx" :type="showPassword ? 'text' : 'password'" placeholder="请再次输入登录密码"
                    border="surround" v-model="form.againPassword">
                    <template #prefix>
                        <view class="tn-icon-lock text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
            </template>
            <template v-if="currentModeIndex === 2">
                <template v-if="!logined">
                    <TnInput class="mb-60rpx h-60rpx" placeholder="请输入手机号" border="surround" v-model="form.mobile">
                        <template #prefix>
                            <view class="tn-icon-phone text-35rpx text-#ccc"></view>
                        </template>
                    </TnInput>
                    <TnInput  class="mb-60rpx h-60rpx" placeholder="请输入验证码" border="surround" v-model="form.captcha">
                        <template #suffix>
                            <captcha :mobile="form.mobile" />
                        </template>
                    </TnInput>
                </template>
                <TnInput class="mb-60rpx h-60rpx" :type="showPassword ? 'text' : 'password'" placeholder="请输入登录密码"
                    border="surround" v-model="form.newpassword">
                    <template #prefix>
                        <view class="tn-icon-lock text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
                <TnInput class="mb-60rpx h-60rpx" :type="showPassword ? 'text' : 'password'" placeholder="请再次输入登录密码"
                    border="surround" v-model="form.againPassword">
                    <template #prefix>
                        <view class="tn-icon-lock text-35rpx text-#ccc"></view>
                    </template>
                </TnInput>
            </template>


            <TnButton class="mb-20rpx button" type="primary" @click="handleClick">
                {{btntext[currentModeIndex]}}
            </TnButton>

            <view class="flex justify-center">
                <view @click="currentModeIndex = 0" class="text-26rpx"
                    v-if="(currentModeIndex === 1 || currentModeIndex === 2) && !logined">
                    前往登录
                </view>
                <template v-if="currentModeIndex === 0">
                    <view @click="currentModeIndex = 1" class="mr-25rpx text-26rpx">账号注册</view>
                    <view @click="currentModeIndex = 2" class="ml-25rpx text-26rpx">忘记密码</view>
                </template>
            </view>
        </view>
        <view class="text-24rpx text-center position-absolute bottom-60rpx" v-if="!logined">
            登录即表示同意<text class="text-color" @click="goAgreement(1)">《用户协议》</text>和<text class="text-color"
                @click="goAgreement(2)">《隐私政策》</text>
        </view>
    </view>
</template>

<script setup lang="ts">
// import captcha from './captcha.vue'
import { ref } from "vue";
import { useLoad } from './hook';
import { TnInput, TnButton } from '@tuniao/tnui-vue3-uniapp';
const btntext = ref({
    0: '登录',
    1: '注册',
    2: '修改密码',
})
const showPassword = ref(false)

const { form, defaultForm, appstore, logined, currentModeIndex } = useLoad({ handleClick })
async function handleClick() {
}

const goAgreement = (id) => {
    uni.navigateTo({
        url: '/pagesA/agreement/index?id=' + id
    })
}
</script>

<style lang="scss">
.body {
    height: 100vb;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* 背景图片 start */
    .login__bg {
        position: fixed;

        &--top {
            top: 0;
            left: 0;
            right: 0;
            width: 100%;

            .bg {
                width: 750rpx;
                will-change: transform;
            }
        }

        &--bottom {
            bottom: -10rpx;
            left: 0;
            right: 0;
            width: 100%;
            // height: 144px;
            margin-bottom: env(safe-area-inset-bottom);

            image {
                width: 750rpx;
                will-change: transform;
            }
        }
    }

    .box {
        width: 80vw;
        padding: 0 40rpx;


        .button {
            margin-top: 75rpx;
            margin-bottom: 39rpx;
            width: 100%;
            height: 77rpx;
            text-align: center;
            // font-size: 31rpx;
            // font-weight: bold;
            line-height: 77rpx;
            letter-spacing: 1em;
            text-indent: 1em;
            border-radius: 39rpx;
            box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
        }
    }

    .text-color {
        color: blue
        // color: $uni-color-primary; 
    }
}
</style>